<template>
  <div :class="isCollapse ? 'isCollapse' : ''">
    <template v-for="(item, index) in data">
      <el-submenu
        :key="index"
        :index="item.path"
        v-if="item.children.length > 0"
      >
        <template slot="title">
          <i v-if="icon && item.icon" :class="item.icon" style="font-size: 24px"></i>
          <img v-if="imgIcon && item.imgIcon" width="40px" :src="'@/assets/imgIcon'+item.imgIcon+'.png'" alt="">
          <span class="span">{{ item.title }}</span>
        </template>
        <syxMenuSun :data="item.children"></syxMenuSun>
      </el-submenu>
      <el-menu-item :key="index" v-else :index="item.path">
        <i v-if="icon && item.icon" :class="item.icon" style="font-size: 24px"></i>
        <img v-if="imgIcon && item.imgIcon" width="40px" :src="'@/assets/imgIcon'+item.imgIcon+'.png'" alt="">
        <span class="span" slot="title">{{ item.title }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: 'syxMenuSun',
  props: {
    /**
     * tree 数据
     */
    data: {
      type: Array,
      default: () => ([])
    },
    /**
     * icon 显示
     */
    icon: {
      type: Boolean,
      default: () => (true)
    },
    /**
     * imgIcon 显示
     */
    imgIcon: {
      type: Boolean,
      default: () => (false)
    },
    /**
     * 箭头显示,缩小必传
     */
    isCollapse: {
      type: Boolean,
      required: false
    }
  }
}
</script>
<style>
  .span{
    margin-left: 20px;
  }
  .isCollapse .el-submenu__title i {
    display: none;
  }
</style>
